<template>
  <div class="comment">
    <div class="comment_title">
      <h3 class="h3">提交评论</h3>
      <div class="comment_right">
        <a @click="$router.go(-1)" class="">返回</a>
      </div>
    </div>

    <van-field
      rows="2"
      autosize
      type="textarea"
      placeholder="请输入评论内容..."
      show-word-limit
      class="Comment_box"
      v-model.trim="comment"
    />
    <van-button type="info" size="large" class="btn" @click="publish"
      >发表</van-button
    >
    <div class="comment_title comment_top">
      <h3 class="h3">评论列表</h3>
      <div class="comment_right">
        <p class="fz">{{ commentList.length }}条评论</p>
      </div>
    </div>
    <div class="list">
      <div
        class="commentlist"
        v-for="(item, index) in commentList"
        :key="index"
      >
        <div class="contentt">{{ item.content }}</div>
        <div class="username">{{ item.user_name }}</div>
        <div class="addtime">{{ item.add_time | dateFilter }}</div>
      </div>
    </div>
    <!-- <van-button plain hairline type="danger" size="large">加载更多</van-button> -->
  </div>
</template>

<script>
import { dateFilter } from "@/utils/filter";

export default {
  data() {
    return {
      comment: "",
    };
  },
  props: {
    commentList: {
      type: Array,
    },
  },
  mounted() {
    console.log(this.commentList);
  },
  filters: {
    dateFilter,
  },
  methods: {
    async publish() {
      console.log(this.comment);
      this.$emit("click", this.comment);
      this.comment = "";
    },
  },
};
</script>

<style lang="less" scoped>
.comment_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  height: 40px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  // background-color: #6cf;
  a {
    display: block;
    color: #007aff;
  }
  .comment_right {
    margin-right: 50px;
    .fz {
      font-size: 12px;
      color: #5c5c5c;
    }
  }
}
.list {
  padding: 10px;
}
/deep/.Comment_box {
  border: 1px solid #ccc;
  margin: 10px;
  width: 95%;
  height: 100px;
  border-radius: 3px;
  font-size: 17px;
}
.btn {
  width: 95%;
  margin: 10px;
}
.comment_top {
  border-top: 1px solid #ccc;
}
.commentlist {
  color: #5c5c5c;
  font-size: 14px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  margin-top: 2px;
  height: 50px;
  &:last-child {
    border-bottom: 0px;
  }
  .contentt {
    margin-bottom: 10px;
  }
  .username {
    width: 50%;
    float: left;
    color: #0094ff;
    padding: 10px 0;
  }
  .addtime {
    width: 50%;
    float: right;
    color: #5c5c5c;
    padding: 10px 0;
  }
}
.h3 {
  font-size: 24px;
  font-weight: bold;
}
</style>